
<script setup lang="ts" name="App01">
  import {ref,reactive,toRefs} from 'vue'
  //导入Home的组件
  import Home from '@/components/Home.vue'

  let sub = ref()

  let names:any = ref('')
  let ages:any = ref(0)

  //演示一个省略value情况
  //嵌套方式: 值又是ref的话,那么获取值的时候,可以不用再去写value
  let obj = ref({
    x:100,
    y:reactive({a:10,n:ref(30)})
  })
  console.log(obj.value.y.n)

  function showSub(){
    //分析
    console.log(sub)//RefImpl
    console.log(sub.value)//ProxyImpl
    //发现ProxyImpl身上的name和age不是直接的数据,而是俩个RefImpl对象
    //按照理解的方式,要想获取name,应该是sub.value.name.value
    //但是此处sub.value.name之后居然被直接解析出拿到的是最终的name中的数据

    //====使用toRefs直接将一个响应式对象中的每一个属性，转换为`ref`对象。
    let {name,age} = toRefs(sub.value)
    console.log(name.value,age.value)
    // name.value = sub.value.name
    // age.value = sub.value.age
    names.value = name
    ages.value = age
  }
</script>

<template>
    <!-- App组件中使用到了Home组件,组件就是以.vue为后缀的文件 -->
    <!-- App是父组件,Home是子组件 -->
    <!-- ref用在组件标签上，获取的是组件实例对象。 -->
    <Home ref="sub"/>
     子组件数据:name:{{names}}-age:{{ages}}
    <button @click="showSub">获取子组件信息</button>
</template>

<!-- css样式 -->
<style scoped>
  
</style>
